// 订单详情页面
<template>
  <div class="body">
    <div class="header">
      <div class="headers" @click="goOff()">
        <i class="el-icon-arrow-left"></i>{{ windowText }}
      </div>
      <div class="header_text" style="padding-top: 0px">
        <span>基本信息</span>
      </div>
      <div class="header_input">
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          :disabled="windowDisplay"
        >
          <div class="boxIndex">
            <el-form-item label="优惠券标题：" required style="width: 420px">
              <el-input
                type="text"
                v-model="name"
                maxlength="9"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item
              label="类型："
              class="no_required_input typeLabel"
              style="width: 330px"
            >
              <el-radio-group v-model="radio" @change="changeRadio($event)">
                <el-radio :label="1">折扣券</el-radio>
                <el-radio :label="2">代金券</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <el-form-item label="优惠券描述：" class="no_required_input">
            <el-input
              type="text"
              v-model="desp"
              maxlength="15"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="发放时间" required>
            <span>开始日期</span>
            <el-date-picker
              v-model="stateTime"
              type="date"
              placeholder="开始日期"
            >
            </el-date-picker>
            <span>结束日期</span>
            <el-date-picker
              v-model="endTime"
              type="date"
              placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="有效期：" required>
            <span>开始日期</span>
            <el-date-picker
              v-model="statesTime"
              type="date"
              placeholder="开始日期"
            >
            </el-date-picker>
            <span>结束日期</span>
            <el-date-picker
              v-model="endsTime"
              type="date"
              placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="发放数量：" required>
            <el-input type="text3" v-model="createnum" show-word-limit
              ><i slot="suffix" style="font-style: normal; margin-right: 10px"
                >张</i
              ></el-input
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="content1">
      <div class="header_text">
        <span>优惠规则</span>
      </div>
      <div class="header_input">
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          :disabled="windowDisplay"
        >
          <el-form-item label="金额/折扣：" required>
            <el-input type="text" v-model="money" show-word-limit
              ><i slot="suffix" style="font-style: normal; margin-right: 10px"
                >元/折</i
              ></el-input
            >
          </el-form-item>
          <el-form-item label="使用门槛：" required>
            <el-input type="text" v-model="condition" show-word-limit
              ><i slot="suffix" style="font-style: normal; margin-right: 10px"
                >元</i
              ></el-input
            >
          </el-form-item>
          <!-- <el-form-item label="适用商品：" class="no_required_input">
            <div>
              <span> 当前选择[定制分组商品]参与：居家用品>毛巾 </span>
              <span v-if="!windowDisplay" class="update_item">修改</span>
            </div>
          </el-form-item> -->
          <el-form-item label="发放渠道：" class="no_required_input">
            <el-radio-group v-model="radios" @change="change($event)">
              <el-radio :label="1">直接领取</el-radio>
              <el-radio :label="2">新人注册领取</el-radio>
              <el-radio :label="3">下单领取</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="每人限领：" required>
            <el-input type="text" v-model="send_num" show-word-limit
              ><i slot="suffix" style="font-style: normal; margin-right: 10px"
                >张</i
              ></el-input
            >
          </el-form-item>
        </el-form>
        <div class="switch" style="display:flex;font-size:16px;padding-bottom:10px">
          <div style="font-size:14px;color:#606266;padding-left:68px;padding-right:10px">状态：</div>
          <el-switch v-model="status" active-color="#13ce66" :active-value="1"
        :inactive-value="0" inactive-color="#C1C1C1" @change="changeStatus()"></el-switch>
        </div>
      </div>
      <div style="padding: 20px 68px" v-if="!windowDisplay">
        <button class="btn_determine" @click="save_btn">保存</button>
      </div>
    </div>
  </div>
</template> 

<script>
export default {
  data() {
    return {
      windowState: "", // 页面类型
      windowText: "", // 页面标题
      windowDisplay: false, // 录入是否禁用
      stateTime: "", // 开始时间
      endTime: "", // 结束时间
      statesTime: "", // 开始时间
      endsTime: "", // 结束时间
      name: "",
      desp: "",
      createnum: "",
      money: "",
      condition: "",
      send_num: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      ids: "",
      status: "",
      radio: "",
      radios: "",
      value: true,
    };
  },
  created() {
    // 获取进入页面的类型：新建、详情、编辑，从而控制页面展示
    this.windowState = this.$route.query.state;
    if (this.windowState === "details") {
      this.windowText = "查看详情";
      this.windowDisplay = true; // 禁用录入框
    } else if (this.windowState === "add") {
      this.windowText = "新建优惠券";
    } else {
      this.windowText = "编辑优惠券";
    }
    this.bianji();
  },
  methods: {
    //返回上一页
    goOff() {
      this.$router.back();
    },
    // 表单上传
    onSubmit() {
      console.log("submit!");
    },
    // 保存
    save_btn() {
      this.$axios({
        methods: "post",
        url: "Coupon/add_coupon",
        params: {
          id: this.ids,
          name: this.name,
          type: this.radio,
          desp: this.desp,
          money: this.money,
          condition: this.condition,
          createnum: this.createnum,
          send_num: this.send_num,
          send_start_time: this.stateTime,
          send_end_time: this.endTime,
          use_start_time: this.statesTime,
          use_end_time: this.endsTime,
          channel: this.radios,
          status: this.status,
        },
      }).then((res) => {
        console.log(res, "新增优惠券");
      });
      this.$message({
        type: "success",
        message: "保存成功！",
      });
      this.$router.go(-1);
    },
    bianji() {
      let row = this.$route.query.row;
      // console.log(row, "row");
      this.ids = this.$route.query.row.id;
      this.name = this.$route.query.row.name;
      this.radio = this.$route.query.row.type;
      this.desp = this.$route.query.row.desp;
      this.money = this.$route.query.row.money;
      this.condition = this.$route.query.row.condition;
      this.createnum = this.$route.query.row.createnum;
      this.send_num = this.$route.query.row.send_num;
      this.endTime = this.$route.query.row.send_end_time;
      this.stateTime = this.$route.query.row.send_start_time;
      this.statesTime = this.$route.query.row.use_start_time;
      this.endsTime = this.$route.query.row.use_end_time;
      this.radios = this.$route.query.row.channel;
      this.status = this.$route.query.row.status;
      
    },
    changeRadio(val) {
      this.radio = val;
    },
    change(val) {
      this.radios = val;
    },
    changeStatus() {
      console.log(this.status, "状态");
    },
  },
};
</script>
<style src="../../components/css/marketing_css/\addcoupon.css"  scoped></style>
<style scoped>
</style>